<template>
    <div class="Iflashbuy-container">
        <el-row :gutter="5">
            <el-col :span="12" class="Iflashbuy-container-1">
                <div>
                    <span>{{Iflashbuydata.Iflashbuymsg[0]}}</span>
                    <p>{{Iflashbuydata.Iflashbuymsg[1]}}</p>
                </div>
            </el-col>
            <el-col :span="12" class="Iflashbuy-container-2">
                <div class="Iflashbuy-container-21">
                    <div class="Iflashbuy-container-img1 Iflashbuy-container-img">
                        <img :src="Iflashbuydata.picture.ttsg">
                        <p>{{ Iflashbuydata.Iflashbuymsg[2] }}</p>
                    </div>
                    <p>{{Iflashbuydata.Iflashbuymsg[3]}}</p>
                </div>
                <div class="Iflashbuy-container-22">
                    <div class="Iflashbuy-container-img2 Iflashbuy-container-img">
                        <img :src="Iflashbuydata.picture.sg">


                        <p>{{Iflashbuydata.Iflashbuymsg[4]}}</p>
                    </div>
                    <p>{{Iflashbuydata.Iflashbuymsg[5]}}</p>
                </div>
            </el-col>
        </el-row>
        <div class="Iflashbuy-container1">
            <div class="Iflashbuy-container1-img">
                <img :src="Iflashbuydata.picture.sg">
                <p>{{Iflashbuydata.Iflashbuymsg[6]}}</p>
            </div>
        </div>
    </div>
   
</template>

<script>
import { Iflashbuys } from "@/api/index"
export default {
    name: 'Iflashbuy',

    data() {
        return {
			Iflashbuydata:[],
        };
    },

    mounted() {
         //从后台获取数据
		 let Buy = async ()=>{
			let IFlashbuy = await Iflashbuys()
			// console.log(IFlashbuy.data.Iflashbuy);
			this.Iflashbuydata = IFlashbuy.data.Iflashbuy
		 }
		 Buy()
    },

    methods: {
        
    },
};
</script>

<style scoped>

.Iflashbuy-container {
	width: 400px;
    margin: 0 auto;
	height: 175px;
    margin-top: 35px;
	background-color:whitesmoke;
}
.Iflashbuy-container>.el-row{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.Iflashbuy-container img {
	width: 18px;
	height: 18px;
}

.Iflashbuy-container p {
	font-size: 0.7em;
	cursor: pointer;
}

.Iflashbuy-container-img1 {
	font-size: 0.9em;
	height: 16px;
	line-height: 16px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding-top: 5px;
}
.Iflashbuy-container-img2 {
	font-size: 0.9em;
	line-height: 16px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	padding-top: 5px;
}
.Iflashbuy-container-img p {
	color: red;
	font-weight: bold;
	display: inline-block;
	height: 16px;
	font-size: 1.1em;
	line-height: 16px;
    transform: translateY(-15px);
}
.Iflashbuy-container-1 {
	width: 49%;
	height: 173px;
	background-image: url(@/assets/images/首页_41.gif);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	text-align: left;		
	text-indent: 5px;
	/* border: 2px solid whitesmoke; */
}
.Iflashbuy-container-1>div {
	padding-top: 5px;
}
.Iflashbuy-container-1 span{
	color: red;
	font-weight: bold;
	cursor: pointer;
}

.Iflashbuy-container-2{
	width: 49%;
	height: 173px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.Iflashbuy-container-21 {
	width: 100%;
	height: 49%;
	background-image: url(@/assets/images/首页_42.gif);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	text-align: left;
	text-indent: 5px;
}

.Iflashbuy-container-22 {
	width: 100%;
	height: 49%;
	background-image: url(@/assets/images/首页_43.gif);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	text-align: right;	
}

.Iflashbuy-container1 {
	width: 400px;
	height: 50px;
	background-color: rgb(240,242,245);
}
.Iflashbuy-container1-img{
	width: 100%;
	height: 20px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding-top: 15px;
}
.Iflashbuy-container1-img p{
	display: inline-block;
	height: 20px;
	width: 65px;
	line-height: 20px;
	text-align: left;	
    font-size: 16px;
    transform: translateY(-15px)translateX(10px);
}

.Iflashbuy-container1-img img {
	width: 20px;
	height: 20px;
    vertical-align: middle;
}
.Iflashbuy-container2{
	background-color: rgb(240,242,245);	
}
.Iflashbuy-container2 img{
	width: 100%;
}
.Iflashbuy-container2>.el-row>.el-col{
	cursor: pointer;
}
.Iflashbuy-container2>.el-row>.el-col>div{
	text-align: left;	
	font-size: 0.8em;	
}
</style>